<template>
  <div>
    <h1>
      新增订单
      <p>
        <el-tag size="large" @click="() => $router.push('/order')">
          取消
        </el-tag>
        &emsp;
        <el-tag @click="addSub" size="large"> 添加 </el-tag>
      </p>
    </h1>
    <el-form :inline="true" :model="form" class="form">
      <el-form-item>
        <a> 姓名</a>
        <el-input v-model="form.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item>
        <a> 手机号</a>
        <el-input v-model="form.mobile" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item>
        <a> 车次</a>
        <el-input v-model="form.train" placeholder="请输入车次" />
      </el-form-item>
      <el-form-item>
        <a> 出发站</a>
        <el-input v-model="form.line" placeholder="请输入出发站" />
      </el-form-item>
      <el-form-item>
        <a> 到达站</a>
        <el-input v-model="form.line1" placeholder="请输入到达站" />
      </el-form-item>
      <el-form-item>
        <a> 票价</a>

        <el-input
          maxlength="3"
          show-word-limit
          v-model.number="form.price"
          placeholder="请输入票价"
        />
      </el-form-item>

      <el-form-item>
        <a> 车厢</a>
        <el-input v-model="form.car" placeholder="请输入车厢" />
      </el-form-item>
      <el-form-item>
        <a> 座位号</a>
        <el-input v-model="form.num" placeholder="请输入座位号" />
      </el-form-item>
      <el-form-item>
        <a> 车座类型</a>
        <el-select placeholder="Select" size="large" v-model="form.type">
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="date1">
        <!-- 类型 --> 
        <a> 预定时间</a>
        <el-date-picker
          size="large"
          v-model="form.date"
          type="date"
          placeholder="预定时间"
          :value-format="YYYY - MM - DD"
          :default-value="new Date(2022, 8, 27)"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { OrdersAdd } from "api";
import { ElMessage } from "element-plus";
export default {
  props: {
    type1: Boolean,
  },
  data() {
    return {
      form: {
        name: "admin",
        mobile: "1563432453",
        train: "G31",
        line: "呼和浩特",
        line1: "银川",
        price: "314",
        type: "软座",
        car: 1,
        num: 2,
        date: "",
      },
      options: ["软座", "硬座", "软卧", "硬卧"],
      options1: ["停用", "启用"],
    };
  },
  methods: {
    async addSub() {
      if (
        this.form.name === "" ||
        this.form.line === "" ||
        this.form.seat === "" ||
        this.form.line1 === ""
      ) {
        ElMessage({
          type: "warning",
          message: "请输入内容",
          icon: (
            <el-icon>
              <HelpFilled />
            </el-icon>
          ),
        });
      } else {
        console.log(this.form);
        const res = await OrdersAdd({ ...this.form });
        ElMessage({
          type: "success",
          message: res.data.msg,
        });
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.form {
  margin: 30px auto;
  width: 100%;
  line-height: 50px;
  font-size: 30px;
  a {
    font-size: 17px;
    width: 80px;
    float: left;
  }
  .el-input,
  .el-select {
    height: 40px;
    width: 90%;
  }
  .date1 {
    a {
      float: left;
      width: 60%;
    } 
  }
}
h1 {
  display: flex;
  width: 100%;
  line-height: 30px;
  border-bottom: solid 1px #ccc;
  padding-bottom: 20px;
  justify-content: space-between;
  margin-bottom: 30px;
}
.a {
  margin-bottom: 20px;
}
.el-tag {
  cursor: pointer;
  font-size: 20px;
  padding: 10px 20px;
}
</style>